<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import tableModel from "./components/tableModel.vue";
import tableForm from "./components/tableForm.vue";
import tableSearch from './components/tableSearch.vue'
import tabelSource from "./components/tableSource.vue";
import tableCreate from "./components/tableCreate.vue";
import tableList from "./components/tableList.vue";

const searchForm = reactive({ keyword: "" });
import { getTablesApi, setTableTitleApi, syncTableApi } from "@/service/db.js";

const tableData = ref([]);
import CommonPagination from "@/components/pagination.vue";

const pagination = ref({
	page: 1,
	limit: 15,
	total: 0
});

const fetchData = () => {
	let params = searchForm;
	params.pagination = pagination.value;
	getTablesApi(params).then(({ code, data, msg }) => {
		tableData.value = data.list;
		pagination.value.total = data.pagination.total;
	});
};

const handleSearch = () => {
	pagination.value.page = 1;
	fetchData();
};

const handleReset = () => {
	searchForm.keyword = "";
	fetchData();
};

// 设置表名
const activeTable = ref({
	name: "",
	title: ""
});

const showInput = row => {
	activeTable.value.name = row.name;
	activeTable.value.title = row.title;
};

const hideInput = () => {
	// activeTable.value.name = ''
	// activeTable.value.title = ''
};

const updateTitle = row => {
	// 提示是否更新
	ElMessageBox.confirm("确定更新表名吗？", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning"
	})
		.then(() => {
			// 更新
			setTableTitleApi(activeTable.value).then(({ code, msg }) => {
				ElMessage.success(msg);
				fetchData();
			});
			activeTable.value.name = "";
			activeTable.value.title = "";
		})
		.catch(() => {
			// 取消
			console.log("取消");
			activeTable.value.name = "";
			activeTable.value.title = "";
		});
};

// 设置模型	
const tableModelRef = ref(null);
const showSetModel = row => {
	tableModelRef.value.openDrawer(row);
};

// 列表项
const tableListRef = ref(null);
const showSetList = row => {
	tableListRef.value.openDrawer(row);
};

// 显示设置检索项
const tableSearchRef = ref(null);
const showSetSearch = row => {
	tableSearchRef.value.openDrawer(row);
};

// 显示设置表单
const tableFormRef = ref(null);
const showSetForm = row => {
	tableFormRef.value.openDrawer(row);
};

// 显示设置数据源
const tableSourceRef = ref(null);
const showSetSource = row => {
	tableSourceRef.value.openDrawer(row);
};

// 创建表
const tableCreateRef = ref(null);
const showCreateTable = () => {
	console.log("showCreateTable", tableCreateRef);
	tableCreateRef.value.openDrawer();
};

// 同步表
const syncTable = () => {
	syncTableApi().then(({ code, msg }) => {
		ElMessage.success(msg);
		fetchData();
	});
};

onMounted(() => {
	fetchData();
});
</script>
<template>
	<el-main>
		<div class="toolbar">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline" @keyup.prevent>
				<el-form-item>
					<el-button type="warning" @click="showCreateTable">创建表</el-button>
					<el-button type="danger" @click="syncTable">同步表</el-button>
				</el-form-item>
				<el-form-item>
					<el-input v-model="searchForm.keyword" placeholder="请输入表名" clearable @keyup.enter="handleSearch"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">查询</el-button>
					<el-button @click="handleReset">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<el-table class="list" :data="tableData" border style="width: 100%">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="name" label="表名" width="200"></el-table-column>
			<el-table-column prop="title" label="描述" width="200">
				<template #default="{row}">
					<el-button
						v-if="activeTable.name!==row.name"
						text
						type="primary"
						@click="showInput(row)"
					>{{ row.title ? row.title : '未设置' }}</el-button>
					<el-input v-else v-model="activeTable.title" @blur="hideInput" @keyup.enter="updateTitle(row)"></el-input>
				</template>
			</el-table-column>
			
			<el-table-column label="模型" align="center">
				<template #default="{row}">
					<el-link :type="row.model ? 'primary' : 'info'" @click="showSetModel(row)">{{ row.model ? '已设置' : '设置' }}</el-link>
				</template>
			</el-table-column>
			
			<el-table-column label="检索项" align="center">
				<template #default="{row}">
					<el-link :type="row.search ? 'primary' : 'info'" @click="showSetSearch(row)">{{ row.search ? '已设置' : '设置' }}</el-link>
				</template>
			</el-table-column>

			<!-- 列表项 -->
			<el-table-column label="列表项" align="center">
				<template #default="{row}">
					<el-link :type="row.list ? 'primary' : 'info'" @click="showSetList(row)">{{ row.list ? '已设置' : '设置' }}</el-link>
				</template>
			</el-table-column>
			
		
			<!-- 表单 -->
			<el-table-column label="表单" align="center">
				<template #default="{row}">
					<el-link :type="row.form ? 'primary' : 'info'" @click="showSetForm(row)">{{ row.form ? '已设置' : '设置' }}</el-link>
				</template>
			</el-table-column>

			<!-- 数据源 -->
			<el-table-column label="数据源" align="center">
				<template #default="{row}">
					<el-link v-if="row.source" type="primary" @click="showSetSource(row)">{{ row.source }}</el-link>
					<el-link v-else type="primary" @click="showSetSource(row)">设置</el-link>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagination">
			<common-pagination :pagination="pagination" @fetch-list="fetchData"></common-pagination>
		</div>

		<table-model ref="tableModelRef" @fetch-list="fetchData"></table-model>
		<table-search ref="tableSearchRef" @fetch-list="fetchData"></table-search>
		<table-form ref="tableFormRef" @fetch-list="fetchData"></table-form>
		<tabel-source ref="tableSourceRef" @fetch-list="fetchData"></tabel-source>
		<table-create ref="tableCreateRef" @fetch-list="fetchData"></table-create>
		<table-list ref="tableListRef" @fetch-list="fetchData"></table-list>
	</el-main>
</template>
